<template>
	<view class="register-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 注册卡片 -->
		<view class="register-card">
			<!-- 标题区域 -->
			<view class="title-section">
				<text class="welcome-title">创建新账号</text>
				<text class="welcome-subtitle">请填写注册信息</text>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-section">
				<!-- 登录账号输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="icon">👤</text>
						</view>
						<input 
							v-model="form.username" 
							placeholder="请输入登录账号" 
							class="input-field"
							type="text"
						/>
					</view>
				</view>
				
				<!-- 真实姓名输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="icon">📝</text>
						</view>
						<input 
							v-model="form.name" 
							placeholder="请输入真实姓名" 
							class="input-field"
							type="text"
						/>
					</view>
				</view>
				
				<!-- 手机号输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="icon">📱</text>
						</view>
						<input 
							v-model="form.phone" 
							placeholder="请输入手机号码" 
							class="input-field"
							type="number"
						/>
					</view>
				</view>
				
				<!-- 密码输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon" @click="togglePasswordVisibility">
							<text class="password-icon">{{ showPassword ? '🔓' : '🔒' }}</text>
						</view>
						<input 
							v-model="form.password" 
							placeholder="请输入登录密码" 
							class="input-field"
							:type="showPassword ? 'text' : 'password'"
						/>
					</view>
				</view>
				
				<!-- 协议同意 -->
				<view class="agreement-section">
					<view class="protocol-status">
						<view class="protocol-item">
							<text class="protocol-status-icon" :class="{'read': readServiceAgreement}">
								{{readServiceAgreement ? '✓' : '○'}}
							</text>
							<text class="agreement-link" @click.stop="showPopup(4)">《用户服务协议》</text>
							<text class="status-text" :class="{'read': readServiceAgreement}">
								{{readServiceAgreement ? '已阅读' : '未阅读'}}
							</text>
						</view>
						<view class="protocol-item">
							<text class="protocol-status-icon" :class="{'read': readPrivacyPolicy}">
								{{readPrivacyPolicy ? '✓' : '○'}}
							</text>
							<text class="agreement-link" @click.stop="showPopup(5)">《隐私政策》</text>
							<text class="status-text" :class="{'read': readPrivacyPolicy}">
								{{readPrivacyPolicy ? '已阅读' : '未阅读'}}
							</text>
						</view>
					</view>
					<view class="agreement-checkbox" @click="toggleAgreement">
						<view class="checkbox" :class="{ 'checked': agreement }">
							<text v-if="agreement" class="checkmark">✓</text>
						</view>
						<view class="agreement-text">
							<text>我已阅读并同意上述所有协议</text>
						</view>
					</view>
				</view>
				
				<!-- 注册按钮 -->
				<view class="register-btn" @click="submit">
					<text class="register-btn-text">提交注册</text>
				</view>
				
				<!-- 返回登录 -->
				<view class="back-login" @click="backToLogin">
					<text class="back-text">已有账号？返回登录</text>
				</view>
			</view>
		</view>
		
		<!-- 协议弹窗 -->
		<view v-if="popupVisible" class="popup-overlay" @click="hidePopup">
			<view class="popup-content" @click.stop>
				<view class="popup-header">
					<text class="popup-title">协议内容</text>
					<view class="popup-close" @click="hidePopup">
						<text class="close-icon">✕</text>
					</view>
				</view>
				<scroll-view class="popup-body" scroll-y="true">
					<view class="protocol-content">
						<rich-text :nodes="protocolsContent"></rich-text>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<view class="popup-btn agree-btn" @click="agreeProtocol">
						<text class="popup-btn-text">
							{{currentProtocolType === '4' ? 
								(readServiceAgreement ? '重新确认阅读' : '确认已阅读服务协议') : 
								(readPrivacyPolicy ? '重新确认阅读' : '确认已阅读隐私政策')
							}}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import localStorage from '@/utils/storage.js'
	export default {
		data() {
			return {
				popupVisible: false,
				protocolsContent: "",
				agreement: false,
				readServiceAgreement: false,  // 是否已阅读服务协议
				readPrivacyPolicy: false,     // 是否已阅读隐私政策
				currentProtocolType: null,    // 当前查看的协议类型
				form: {
					username: '',
					name: '',
					phone: '',
					password:''
				},
				showPassword: false,
			};
		},
		
		mounted() {
		},

		
		methods: {
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			toggleAgreement() {
				// 检查是否两个协议都已阅读
				if (this.readServiceAgreement && this.readPrivacyPolicy) {
					if (this.agreement) {
						// 如果已经同意了，再次点击则取消同意，并重置阅读状态
						this.agreement = false;
						this.readServiceAgreement = false;
						this.readPrivacyPolicy = false;
						uni.showToast({
							title: '已取消同意，请重新阅读协议',
							icon: 'none',
							duration: 2000
						});
					} else {
						// 如果没有同意，则同意
						this.agreement = true;
						uni.showToast({
							title: '已同意协议',
							icon: 'success',
							duration: 1500
						});
					}
				} else {
					// 如果还没有阅读完两个协议，提示用户
					let missingProtocols = [];
					if (!this.readServiceAgreement) missingProtocols.push('服务协议');
					if (!this.readPrivacyPolicy) missingProtocols.push('隐私政策');
					
					uni.showToast({
						title: `请先阅读完${missingProtocols.join('和')}`,
						icon: 'none',
						duration: 2000
					});
				}
			},
			showPopup(id) {
			    this.popupVisible = true;
				this.currentProtocolType = id;
				this.loadProtocolContent(id);
			},
			
			loadProtocolContent(id) {
				const protocolsMap = {
					'4': `
						<div style="padding: 20px; line-height: 1.6; color: #333;">
							<h1 style="color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; font-size: 24px;">小何备忘录用户服务协议</h1>
							
							<div style="background: #f8f9fa; padding: 15px; border-left: 4px solid #3498db; margin: 20px 0;">
								<p><strong>生效日期：</strong>2025年4月16日</p>
								<p><strong>更新日期：</strong>2025年4月16日</p>
							</div>
						
							<h2 style="color: #34495e; margin-top: 30px;">1. 协议说明</h2>
							<p>欢迎使用小何备忘录应用（以下简称"本应用"）。本协议是您与我之间就使用本应用所订立的协议。请您在使用本应用前仔细阅读本协议的全部内容。</p>
						
							<h2 style="color: #34495e; margin-top: 30px;">2. 服务内容</h2>
							<p>小何备忘录为用户提供以下服务：</p>
							<ul>
								<li>📝 备忘录创建、编辑、删除功能</li>
								<li>🏷️ 备忘录分类管理（工作、生活、学习等8个分类）</li>
								<li>🔍 备忘录搜索功能</li>
								<li>💾 本地数据存储与管理</li>
								<li>🔒 数据安全保护</li>
								<li>📊 使用统计和分析</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">3. 用户权利与义务</h2>
							<h3>3.1 用户权利</h3>
							<ul>
								<li>享受小何备忘录提供的各项服务</li>
								<li>对个人数据享有完全控制权</li>
								<li>享受技术支持和客户服务</li>
								<li>随时导出个人备忘录数据</li>
							</ul>
						
							<h3>3.2 用户义务</h3>
							<ul>
								<li>遵守相关法律法规</li>
								<li>不得利用本应用从事违法活动</li>
								<li>保护账户安全，不得恶意破坏服务</li>
								<li>合理使用应用功能，不得滥用</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">4. 数据存储与隐私</h2>
							<p>小何备忘录高度重视用户隐私保护：</p>
							<ul>
								<li>🔐 所有数据存储在用户本地设备上</li>
								<li>🚫 不会未经授权上传用户个人信息到服务器</li>
								<li>📊 仅收集必要的匿名使用统计数据用于改善服务</li>
								<li>💾 用户完全控制自己的数据，可随时删除</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">5. 知识产权</h2>
							<p>小何备忘录应用的所有知识产权归开发者所有，包括但不限于：</p>
							<ul>
								<li>软件代码和技术架构</li>
								<li>用户界面设计和交互逻辑</li>
								<li>应用名称、图标和标识</li>
								<li>功能创意和实现方案</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">6. 免责声明</h2>
							<div style="background: #f8f9fa; padding: 15px; border-left: 4px solid #3498db; margin: 20px 0;">
								<p style="color: #e74c3c; font-weight: bold;">重要提醒：</p>
								<ul>
									<li>请定期备份重要的备忘录数据</li>
									<li>我不对因设备故障、系统崩溃等不可抗力导致的数据丢失承担责任</li>
									<li>建议您及时更新应用版本以获得最佳体验和安全保障</li>
									<li>本应用基于微信小程序平台，受微信平台政策约束</li>
								</ul>
							</div>
						
							<h2 style="color: #34495e; margin-top: 30px;">7. 服务变更与终止</h2>
							<p>我保留在以下情况下变更或终止服务的权利：</p>
							<ul>
								<li>技术升级和功能改进需要</li>
								<li>法律法规政策变化要求</li>
								<li>用户违反协议条款</li>
								<li>微信平台政策调整</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">8. 争议解决</h2>
							<p>因本协议引起的争议，双方应友好协商解决。协商不成的，可向有管辖权的人民法院起诉。</p>
						
							<h2 style="color: #34495e; margin-top: 30px;">9. 协议修改</h2>
							<p>我有权根据需要修改本协议。修改后的协议将在应用内公布，继续使用小何备忘录即视为同意修改后的协议。</p>
						
							<div style="background: #f8f9fa; padding: 15px; border-left: 4px solid #3498db; margin: 20px 0;">
								<h2 style="color: #34495e; margin-top: 30px;">10. 联系我</h2>
								<p>如果您对本协议有任何疑问，请通过以下方式联系我：</p>
								<ul>
									<li>📧 邮箱：2638177984@qq.com</li>
								</ul>
							</div>
						
							<p style="text-align: center; margin-top: 40px; color: #7f8c8d;">
								<small>感谢您选择小何备忘录！</small>
							</p>
						</div>
					`,
					'5': `
						<div style="padding: 20px; line-height: 1.6; color: #333;">
							<h1 style="color: #2c3e50; border-bottom: 2px solid #e74c3c; padding-bottom: 10px; font-size: 24px;">小何备忘录隐私政策</h1>
							
							<div style="background: #f8f9fa; padding: 15px; border-left: 4px solid #e74c3c; margin: 20px 0;">
								<p><strong>生效日期：</strong>2025年4月16日</p>
								<p><strong>更新日期：</strong>2025年4月16日</p>
								<p style="color: #e74c3c; font-weight: bold;">我承诺保护您的隐私安全</p>
							</div>
						
							<h2 style="color: #34495e; margin-top: 30px;">1. 隐私政策概述</h2>
							<p>本隐私政策说明小何备忘录如何收集、使用、存储和保护您在使用我的备忘录应用时的个人信息。我深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。</p>
						
							<div style="background: #ecf0f1; padding: 20px; border-radius: 8px; margin: 15px 0;">
								<h2 style="color: #34495e; margin-top: 30px;">2. 我收集的信息</h2>
								<h3>2.1 您主动提供的信息</h3>
								<ul>
									<li>👤 账户信息：用户名、姓名、手机号码</li>
									<li>🔑 登录凭证：密码（经加密存储）</li>
									<li>📝 备忘录内容：您创建的所有备忘录数据及分类</li>
									<li>⚙️ 应用设置：您的个性化配置信息</li>
								</ul>
							
								<h3>2.2 自动收集的信息</h3>
								<ul>
									<li>📊 使用统计：功能使用频率、应用启动次数（匿名统计）</li>
									<li>🔧 设备信息：设备型号、操作系统版本（仅用于兼容性优化）</li>
									<li>⏰ 时间信息：备忘录创建和修改时间</li>
									<li>📈 性能数据：应用响应时间、崩溃报告（匿名收集）</li>
								</ul>
							</div>
						
							<h2 style="color: #34495e; margin-top: 30px;">3. 信息使用目的</h2>
							<p>我收集和使用您的个人信息仅用于以下目的：</p>
							<ul>
								<li>🎯 提供核心服务：备忘录的创建、编辑、分类、本地存储</li>
								<li>🔐 账户安全：用户身份验证和登录管理</li>
								<li>📈 改善服务：分析使用模式，优化产品功能和用户体验</li>
								<li>🛠️ 技术支持：处理用户反馈和技术问题</li>
								<li>📞 客户服务：回应您的咨询和建议</li>
								<li>🔍 功能优化：根据使用习惯改进应用性能</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">4. 数据存储与安全</h2>
							<div style="background: #ecf0f1; padding: 20px; border-radius: 8px; margin: 15px 0;">
								<h3>4.1 本地存储优先</h3>
								<ul>
									<li>💾 主要数据：所有备忘录内容存储在您的设备本地</li>
									<li>🔒 加密保护：本地数据采用加密技术保护</li>
									<li>🚫 无服务器依赖：核心功能无需联网即可使用</li>
									<li>📱 微信存储：基于微信小程序的本地存储机制</li>
								</ul>
							
								<h3>4.2 安全保障措施</h3>
								<ul>
									<li>🔑 密码保护：用户密码采用不可逆哈希算法存储</li>
									<li>🚫 访问控制：严格限制数据访问权限</li>
									<li>🔍 定期检查：定期进行安全检查和更新</li>
									<li>⚡ 快速响应：及时处理安全相关问题</li>
								</ul>
							</div>
						
							<h2 style="color: #34495e; margin-top: 30px;">5. 信息共享与披露</h2>
							<div style="background: #f8f9fa; padding: 15px; border-left: 4px solid #e74c3c; margin: 20px 0;">
								<p style="color: #e74c3c; font-weight: bold;">我郑重承诺：</p>
								<ul>
									<li>🚫 <strong>绝不出售</strong>您的个人信息</li>
									<li>🚫 <strong>绝不泄露</strong>您的备忘录内容</li>
									<li>🚫 <strong>绝不用于</strong>商业推广和营销</li>
									<li>🚫 <strong>绝不分享</strong>给第三方机构</li>
								</ul>
							</div>
						
							<p>仅在以下极少数情况下，我可能会披露您的必要信息：</p>
							<ul>
								<li>⚖️ 法律要求：政府部门依法明确要求</li>
								<li>🛡️ 安全保护：保护用户和公众的重大安全利益</li>
								<li>📜 明确同意：获得您的明确书面同意</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">6. 您的权利</h2>
							<p>您对自己的个人信息享有以下完整权利：</p>
							<ul>
								<li>👁️ <strong>查看权</strong>：随时查看我收集的您的个人信息</li>
								<li>✏️ <strong>修改权</strong>：更正不准确或过时的个人信息</li>
								<li>🗑️ <strong>删除权</strong>：要求删除您的个人信息和账户</li>
								<li>📤 <strong>导出权</strong>：导出您的所有备忘录数据</li>
								<li>🚫 <strong>拒绝权</strong>：拒绝特定的数据处理活动</li>
								<li>⏸️ <strong>暂停权</strong>：暂时停止某些数据处理</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">7. 数据保留期限</h2>
							<div style="background: #ecf0f1; padding: 20px; border-radius: 8px; margin: 15px 0;">
								<ul>
									<li>📝 备忘录数据：在您的设备上永久保留，直到您主动删除</li>
									<li>👤 账户信息：账户存续期间持续保留</li>
									<li>📊 统计数据：匿名使用统计保留30天后自动删除</li>
									<li>🔐 登录日志：保留7天用于安全分析</li>
									<li>📞 客服记录：保留6个月用于服务质量改进</li>
									<li>🗑️ 删除账户：账户注销后7天内彻底删除所有相关数据</li>
								</ul>
							</div>
						
							<h2 style="color: #34495e; margin-top: 30px;">8. 未成年人保护</h2>
							<p>小何备忘录高度重视未成年人的隐私保护：</p>
							<ul>
								<li>🧒 不主动收集14岁以下儿童的个人信息</li>
								<li>👨‍👩‍👧‍👦 14-18岁用户建议在监护人指导下使用</li>
								<li>🛡️ 发现未成年人敏感信息会立即删除</li>
								<li>📚 提供适合未成年人的安全使用指南</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">9. 微信小程序平台说明</h2>
							<p>小何备忘录基于微信小程序平台开发，相关数据处理遵循：</p>
							<ul>
								<li>📜 微信小程序平台用户协议和隐私政策</li>
								<li>🔒 微信平台的安全机制和数据保护措施</li>
								<li>✅ 微信平台的审核要求和合规标准</li>
								<li>🌐 相关法律法规和行业标准</li>
							</ul>
						
							<h2 style="color: #34495e; margin-top: 30px;">10. 政策变更通知</h2>
							<p>如果我对本隐私政策进行重大变更，我将：</p>
							<ul>
								<li>📱 在小何备忘录应用内显著位置发布通知</li>
								<li>✉️ 通过应用内消息或其他方式告知您</li>
								<li>⏰ 变更生效前至少提前15天通知</li>
								<li>🔄 为您提供简单易懂的变更对比说明</li>
							</ul>
						
							<div style="background: #f8f9fa; padding: 15px; border-left: 4px solid #e74c3c; margin: 20px 0;">
								<h2 style="color: #34495e; margin-top: 30px;">11. 联系我</h2>
								<p>如果您对本隐私政策有任何疑问、建议或需要行使您的权利，请随时联系我：</p>
								<ul>
									<li>📧 隐私邮箱：2638177984@qq.com</li>
									<li>⏰ 回复时间：我承诺在收到邮件后24小时内回复</li>
								</ul>
							</div>
						
							<p style="text-align: center; margin-top: 40px; color: #7f8c8d;">
								<small>感谢您选择小何备忘录！您的隐私安全是我的首要责任！</small>
							</p>
						</div>
					`
				};
				
				this.protocolsContent = protocolsMap[id] || '<div style="text-align: center; padding: 50px;"><p>协议内容不存在。</p></div>';
			},
			 hidePopup() {
			    this.popupVisible = false;
			},
			
			agreeProtocol() {
				// 标记当前协议已阅读
				if (this.currentProtocolType == '4' || this.currentProtocolType == 4) {
					this.readServiceAgreement = true;
					uni.showToast({
						title: '已阅读服务协议',
						icon: 'success',
						duration: 1500
					});
				} else if (this.currentProtocolType == '5' || this.currentProtocolType == 5) {
					this.readPrivacyPolicy = true;
					uni.showToast({
						title: '已阅读隐私政策',
						icon: 'success',
						duration: 1500
					});
				}
				
				// 检查是否两个协议都已阅读
				this.$nextTick(() => {
					if (this.readServiceAgreement && this.readPrivacyPolicy) {
						this.agreement = true;
						uni.showToast({
							title: '已阅读完所有协议，可以注册了',
							icon: 'success',
							duration: 2000
						});
					}
				});
				
				this.popupVisible = false;
			},
			
			submit() {
				// 验证表单
				if (!this.form.username) {
					uni.showToast({
						title: '请输入登录账号',
						icon: 'none'
					});
					return;
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					});
					return;
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if (this.form.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return;
				}
				if (this.readServiceAgreement === false || this.readPrivacyPolicy === false) {
					uni.showToast({
						title: '请先阅读并同意所有协议',
						icon: 'none'
					});
					return;
				}
				
				// 验证手机号格式
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				// 调用本地存储注册
				const result = localStorage.register({
					username: this.form.username || this.form.phone, // 如果没有用户名，使用手机号
					name: this.form.name,
					phone: this.form.phone,
					password: this.form.password,
					agreeProtocol: this.agreement
				});
				
				if (result.success) {
					uni.showToast({
						title: result.message,
						icon: 'success'
					});
					
					setTimeout(() => {
						// 注册成功后直接跳转到首页
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500);
				} else {
					uni.showToast({
						title: result.message,
						icon: 'none'
					});
				}
			},
			backToLogin() {
				uni.navigateBack();
			}
		},
	}
</script>

<style lang="scss" scoped>
.register-container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.gradient-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	z-index: 0;
}

.register-card {
	position: relative;
	z-index: 1;
	width: 680rpx;
	margin: 0 auto;
	margin-top: 180rpx;
	background: #ffffff;
	border-radius: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	padding: 60rpx 60rpx 40rpx;
}

.title-section {
	text-align: center;
	margin-bottom: 60rpx;
}

.welcome-title {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
}

.welcome-subtitle {
	display: block;
	font-size: 28rpx;
	color: #666;
}

.form-section {
	width: 100%;
}

.input-group {
	margin-bottom: 30rpx;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 25rpx;
	padding: 0 30rpx;
	height: 90rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.input-wrapper:focus-within {
	border-color: #a6c0fe;
	background: #ffffff;
	box-shadow: 0 0 20rpx rgba(166, 192, 254, 0.3);
}

.input-icon {
	margin-right: 20rpx;
	font-size: 32rpx;
	color: #999;
	cursor: pointer;
}

.icon {
	font-size: 32rpx;
}

.password-icon {
	transition: all 0.3s ease;
}

.input-field {
	flex: 1;
	font-size: 30rpx;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
}

.input-field::placeholder {
	color: #999;
}

.agreement-section {
	margin-bottom: 50rpx;
}

.protocol-status {
	margin-bottom: 30rpx;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 20rpx;
	border: 2rpx solid #e9ecef;
}

.protocol-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
	padding: 10rpx 0;
}

.protocol-item:last-child {
	margin-bottom: 0;
}

.protocol-status-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 15rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 24rpx;
	font-weight: bold;
	border: 2rpx solid #ddd;
	color: #999;
	background: #fff;
}

.protocol-status-icon.read {
	background: #4CAF50;
	border-color: #4CAF50;
	color: #fff;
}

.status-text {
	margin-left: auto;
	font-size: 24rpx;
	color: #999;
}

.status-text.read {
	color: #4CAF50;
	font-weight: bold;
}

.agreement-checkbox {
	display: flex;
	align-items: flex-start;
}

.checkbox {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #ddd;
	border-radius: 6rpx;
	margin-right: 20rpx;
	margin-top: 4rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.checkbox.checked {
	background: #a6c0fe;
	border-color: #a6c0fe;
}

.checkmark {
	color: #fff;
	font-size: 20rpx;
	font-weight: bold;
}

.agreement-text {
	flex: 1;
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.agreement-link {
	color: #a6c0fe;
	margin: 0 8rpx;
}

.register-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
	box-shadow: 0 10rpx 30rpx rgba(166, 192, 254, 0.4);
	transition: all 0.3s ease;
}

.register-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 8rpx 25rpx rgba(166, 192, 254, 0.3);
}

.register-btn-text {
	font-size: 30rpx;
	color: #fff;
	font-weight: 600;
}

.back-login {
	text-align: center;
}

.back-text {
	font-size: 28rpx;
	color: #a6c0fe;
}

.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.popup-content {
	width: 680rpx;
	max-height: 85%;
	background: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.25);
	animation: popup-in 0.3s ease-out;
}

@keyframes popup-in {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(40rpx);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 50rpx 40rpx 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	position: relative;
}

.popup-title {
	font-size: 38rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.popup-close {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 32rpx;
	background: rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.popup-close:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.close-icon {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

.popup-body {
	max-height: 500rpx;
	background: #fff;
}

.protocol-content {
	padding: 40rpx;
	line-height: 1.8;
}

/* 优化富文本内容样式 */
.protocol-content :deep(h1) {
	font-size: 36rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #667eea;
}

.protocol-content :deep(h2) {
	font-size: 32rpx;
	font-weight: 600;
	color: #34495e;
	margin: 40rpx 0 20rpx;
}

.protocol-content :deep(p) {
	font-size: 28rpx;
	color: #555;
	line-height: 1.8;
	margin-bottom: 20rpx;
	text-align: justify;
}

.protocol-content :deep(ul) {
	margin: 20rpx 0;
	padding-left: 40rpx;
}

.protocol-content :deep(li) {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 12rpx;
}

.popup-footer {
	padding: 30rpx 40rpx 40rpx;
	background: #f8f9fa;
}

.popup-btn {
	width: 100%;
	height: 96rpx;
	border-radius: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
	overflow: hidden;
}

.agree-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
}

.agree-btn:active {
	transform: scale(0.98);
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
}

.popup-btn-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 600;
	text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 1;
}
</style>

